<template>
  <div class="chatroom">
    <div class="top">
      <el-button style="margin: 6px; background-color: #454545; border: 0">
        {{ currentSessionName }}
      </el-button>
    </div>

    <div class="messages">
      <ul>
        <li class="messages_li" v-for="(item, i) in messages" :key="i">
          <br />
          <!-- <p class="messages_time">
            <span class="messages_time_span">{{ item.date }}</span>
          </p> -->
          <div>
            <img
              class="avatar"
              width="40"
              height="40"
              src="../../assets/1.png"
            />
            <p style="vertical-align: middle; font-size: 28px">
              {{ item.senderName }}
            </p>
            <div style="background-color: #393939; border-radius: 9px">
              <p style="margin-left: 15px; margin-right: 15px">
                {{ item.content }}
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="text">
      <textarea
        class="text_textarea"
        placeholder="按 Ctr + Enter 发送"
        v-model="content"
        @keyup.ctrl.enter="sendMessage"
      ></textarea>
      <!-- @keyup不调用sendMessage -->
    </div>
  </div>

  <div class="memberList">
    <el-menu style="background-color: #353535">
      <el-button class="memberList_title"> Members </el-button>

      <el-menu-item v-for="(item, i) in memberList" :key="i">
        <div>
          <img class="avatar_friendCard" src="../../assets/1.png" />
          <p class="memberList_name">
            {{ item.userName }}
          </p>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
li {
  list-style: none;
}
.chatroom {
  position: fixed;
  left: 305px;
  right: 235px;
  height: 100%;
  top: 0;
  background-color: #454545;
}
.top {
  height: 50px;
  border-bottom: 1px #353535;
  border-bottom-style: solid;
}

.memberList {
  top: 0;
  position: fixed;
  width: 235px;
  background-color: #353535;
  right: 0;
  height: 100%;
}
.messages {
  height: 85%;
  padding: 10px 15px;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
.messages_li {
  margin-bottom: 20px;
}

.messages_time {
  margin: 7px 0;
  text-align: center;
}

.messages_time_span {
  display: inline-block;
  padding: 0 18px;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  background-color: #dcdcdc;
}

.avatar {
  float: left;
  margin: 0 10px 0 0;
  border-radius: 5px;
  vertical-align: middle;
}

.text {
  height: 15px;
  text-align: center;
  margin: 17px;
}

.text_textarea {
  width: 96%;
  border: none;
  outline: none;
  border-radius: 8px;
  font-family: "Micrsofot Yahei";
  resize: none; /* 不可改变形状*/
  background-color: #555555;
}
.memberList_title {
  font-size: 22px;
  font-weight: bolder;
  color: #08d671;
  background-color: #454545;
  height: 50px;
  width: 100%;
  border-left: 1px #333333;
  border-bottom: 1px #333333;
  border-style: solid;
  border-top: 0;
  border-right: 0;

}
.avatar_friendCard {
  vertical-align: middle;
  width: 45px;
  border-radius: 12px;
}
.memberList_name {
  margin: 0 0 0 15px;
  display: inline-block;
}
</style>

<script>
import { useStore } from "vuex";
import { onMounted, watch, ref } from "vue";
//import { ElMessage } from "element-plus";
//import { reactive } from "vue";
//import { computed } from "vue";

export default {
  name: "ChatRoom",

  setup() {
    const store = useStore();

    const user = store.getters.CurrentUser;
    const content = ref("");
    const session = ref([]);
    const currentSessionId = ref("");
    const currentSessionName = ref("");
    const messages = ref([]);
    const memberList = ref([
      { userId: "12", userName: "李剑峰", userImg: "" },
      { userId: "13", userName: "王子轩", userImg: "" },
      { userId: "3234", userName: "Lebin", userImg: "" },
      { userId: "4234", userName: "Kirby0", userImg: "" },
    ]);

    const getSession = async () => {
      // 更新 `props.user ` 到 `user.value` 访问引用值
      // session.value = await fetchUserRepositories(user.value)
      session.value = store.getters.session;
      currentSessionId.value = session.value.sessionId;
      currentSessionName.value = session.value.sessionName;
      messages.value = session.value.messages;
    };

    const sendMessage = () => {
      const Msg = content.value;
      //ElMessage("发送消息： " + Msg);
      if (Msg.length) {
        content.value = "";
      }
      messages.value.push({
        senderID: user.userId,
        senderName: user.userName,
        senderImg: "../assets/1.png",
        content: Msg,
      });
    };

    onMounted(getSession);

    //监听currentSessionId变化时
    watch(
      () => store.getters.CurrentSessionId,
      (val, old) => {
        console.log(val, old);
        //ElMessage(val);
        getSession();
      }
    );

    return {
      user,
      content,
      session,
      currentSessionId,
      currentSessionName,
      messages,
      memberList,
      getSession,
      sendMessage,
    };
  },
};
</script>
